<template>
  <div class="file-list-view">
    <template v-for="(file, fileIndex) in list" :key="fileIndex">
      <div class="file-item">
        <img :src="getFileTypeIcon(file.name)" alt="" class="pic-icon">
        <div class="file-name text-one-line">{{ file.name }}</div>
        <div class="file-size">( {{ fontSizeValue(file.size) }} )</div>
        <div class="down">
          <span @click="previewClick(file, fileIndex)">预览</span>
          <span @click="downloadClick(file)">下载</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
/**
 * 文件列表
 * @props list {Array} 文件列表
 */

import {downloadFile, getFileIconWithSuffix} from '/src/utils/index.js'

import {fileSize} from '/src/utils/index.js'
import {getCurrentInstance} from "vue";

const cxt = getCurrentInstance()
const bus = cxt.appContext.config.globalProperties.$bus
const $wkPreviewFile = cxt.appContext.config.globalProperties.$wkPreviewFile


defineOptions({
  name: 'FileListView',
})

const props = defineProps({
  list: {
    type: Array,
    required: true
  }
})

function fontSizeValue(size) {
  return fileSize(size)
}

function getFileTypeIcon(url) {
  if (!url) {
    return ''
  }
  const temps = url ? url.split('.') : []
  let ext = ''
  if (temps.length > 0) {
    ext = temps[temps.length - 1]
  } else {
    ext = ''
  }

  return getFileIconWithSuffix(ext)
}

function downloadClick(file) {
  downloadFile({path: file.filePath || file.url, name: file.name})
}

function previewClick(file, fileIndex) {
  $wkPreviewFile.preview({
    index: fileIndex,
    data: props.list.map(function (item) {
      return {
        url: item.filePath || item.url,
        name: item.name
      }
    })
  })
}
</script>


<style scoped lang="scss">
.file-list-view {
  .file-item {
    width: 100%;
    font-size: 12px;
    line-height: 1.5;
    box-sizing: border-box;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .pic-icon {
      width: 12px;
      margin-right: 8px;
      flex-shrink: 0;
    }

    .file-name {
      margin-right: 14px;
      // width: 0;
      // flex: 1;
    }

    .file-size {
      color: #999;
      margin-right: 15px;
      flex-shrink: 0;
    }

    .down {
      color: #2362FB;
      cursor: pointer;
      flex-shrink: 0;

      span:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
